<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>统战成员学习平台</title>
    <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/discovery.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/viewer.min.css"/>

    <style>
        .curMsg {
            background-color: #D0D0D0
        }
    </style>
</head>

<body class="white">
<div id='app' style="display:none" v-show="true">
    <ul class="discovery_list" @touchstart="touchstart()">
        <li>
            <img class="user_head" :src="imageBasePath + detail.usrImg" onerror="this.src=''">
            <p class="name" v-text="detail.usrName"></p>
            <p class="content" v-html="detail.content"></p>
            <ul v-if="detail.imgList.length" class="imgs" :class="{'four': detail.imgList.length===4}">
                <li v-for="(img, i) of detail.imgList">
                    <img :key="img.imgUrl + '-' + i"
                         :src="imageBasePath + img.imgUrl"
                         @click="photoBrowser()"
                         style="width: 100%;height: 100%;object-fit: cover;">
                </li>
            </ul>
            <div class="time">
                <span v-text="detail.createDate"></span>
                <transition name="scaleFromRight">
                    <div @touchstart.stop class="caozuo_warp" v-if="zaning"><span @click="vote()">
								<i class="icon_dis_zan"></i>{{detail.voteState ? '取消' : '赞'}}</span><span @click="comment()">
									<i class="icon_dis_comm"></i>评论</span>
                    </div>
                </transition>
                <span @touchstart.stop="zaning = !zaning" class="caozuo"><i class="icon_dis_caozuo"></i></span>
            </div>
            <div v-if="detail.voteList.length || messageList.length" class="bottom">
                <div v-if="detail.voteList.length" class="zan">
                    <i class="icon_dis_zaned"></i>
                    <span v-for="(voteUser,index) of detail.voteList"><i v-if="index > 0">, </i>{{voteUser.usrName}}</i>
                </div>
                <ul v-if="messageList.length" class="comment ui_border_t">
                    <p :class="{'curMsg': curMsgId===msg.studyMomentMsgId}" @touchstart="showDeleteButton(msg.studyMomentMsgId,msg.userId,detail)" @click="comment(msg.userId, msg.usrName)" v-for="msg of messageList">
                        <span v-text="msg.usrName"></span> {{msg.replyUserId ? '回复 ' : ''}}<span v-if="msg.replyUserId" v-text="msg.replyUserName"></span>: {{msg.replyContent}}</p>
                </ul>
            </div>
        </li>
    </ul>
    <div @touchstart.stop v-if="replaying" class="replay_warp ui_border_t" :class="replayTextClass">
        <textarea v-model="replayText" id="replayText" :placeholder="replyUserName.length > 0 ? ('回复'+replyUserName+'：') : ''"></textarea>
        <textarea v-model="replayText" id="replayTextClone" style="height:0;visibility: hidden;"></textarea>
        <!-- <input v-model="replayText" type="text" id="replayText" :placeholder="replyUserName.length > 0 ? ('回复'+replyUserName+'：') : ''"> -->
        <span @click="commentSubmit()" :class="{'disable': replayText.length === 0}">发送</span>
    </div>
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../script/viewer.min.js"></script>
<script type="text/javascript" src="../../script/jquery-viewer.min.js"></script>
<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            curMsgId: '',
            imageBasePath: imageBasePath,
            zaning: false,
            studyMomentId: 0,
            detail: {
                imgList: [],
                voteList: []
            },
            messageList: [],
            loading: false,
            loaded: false,
            pageNum: 1,
            pageSize: 100,
            replaying: false,
            replayText: '',
            replayTextClass: '',
            replayStudyMoment: {},
            replyUserId: 0,
            replyUserName: '',
            apiready: false,
            loginUser: {}
        },
        watch: {
            replayText: function () {
                var $this = this;
                var replayTextClone = $api.byId('replayTextClone');
                if (replayTextClone) {
                    var rows = Math.round((replayTextClone.scrollHeight - 6) / 24);
                    $this.replayTextClass = rows >= 3 ? 'three' : rows === 2 ? 'two' : '';
                }
            }
        },
        mounted: function () {
            var $this = this;
            apiready = function () {
                $this.apiready = true;
                api.parseTapmode();
                $this.studyMomentId = api.pageParam.studyMomentId;
                $this.init();
                $this.getVoteList();
                $this.getMsgList();

                api.addEventListener({
                    name: 'del_moment_event'
                }, function (ret, err) {
                    $this.delMoment();
                });
                onScrollToBottom(function () {
                    if ($this.loaded) return;
                    $this.getMsgList()
                })
            }
        },
        methods: {
            init: function () {
                var $this = this;
                post('/client/studyMoment/detail', {
                    studyMomentId: $this.studyMomentId
                }, function (ret) {
                    var loginUser = $api.getStorage(_.USERINFO);
                    $this.loginUser = loginUser;
                    if (ret.isSuccess) {
                        $this.detail = ret.data
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        });
                    }
                });
            },
            getVoteList: function () {
                var $this = this;
                post('/client/studyMoment/getVoteList', {
                    studyMomentId: $this.studyMomentId
                }, function (ret) {
                    if (ret.isSuccess) {
                        $this.voteList = ret.data.list
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        });
                    }
                });
            },
            getMsgList: function () {
                var $this = this;
                post('/client/studyMoment/getMsgList', {
                    studyMomentId: $this.studyMomentId,
                    pageNum: $this.pageNum,
                    pageSize: $this.pageSize
                }, function (ret) {
                    if (ret.isSuccess) {
                        $this.messageList = [];
                        ret.data.list.forEach(function (item) {
                            $this.messageList.push(item)
                        })
                        $this.messageList.nextPage = ret.data.nextPage;
                        $this.messageList.isLastPage = ret.data.isLastPage;
                        ret.data.isLastPage ? $this.loaded = true : $this.pageNum++;
                        parseTapmode();
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        });
                    }
                });
            },
            photoBrowser: function () {
                var $this = this;
                $('.imgs').viewer({
                    navbar: false,
                    toolbar: false,
                    title: false
                });
            },
            vote: function () {
                var $this = this;
                if (!$this.apiready) return;
                $this.zaning = false;
                var userInfo = $api.getStorage(_.USERINFO);
                post('/client/studyMoment/vote', {
                    studyMomentId: $this.studyMomentId,
                    voteAction: $this.detail.voteState ? 0 : 1
                }, function (ret) {
                    if (ret.isSuccess) {
                        $this.detail.voteState ? $this.detail.voteList.some(function (item, index) {
                            if (item.userId === userInfo.usrId) {
                                $this.detail.voteList.splice(index, 1);
                                return;
                            }
                        }) : $this.detail.voteList.push({
                            userId: userInfo.usrId,
                            usrName: userInfo.usrName
                        });
                        $this.detail.voteState = !$this.detail.voteState;
                        api.sendEvent({
                            name: 'refresh_moments_event'
                        });
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        })
                    }
                });
            },
            touchstart: function () {
                if (!this.apiready) return;
                this.zaning = false;
                this.replaying = false;
                api.setFrameAttr({
                    name: 'moment_detail_frm',
                    bounces: true
                });
                document.body.classList.remove('full_body');
            },
            comment: function (replyUserId, replyUserName) {
                var $this = this;
                if (!$this.apiready) return;

                var userInfo = $api.getStorage(_.USERINFO);
                if (replyUserId === userInfo.usrId) return;

                document.body.classList.add('full_body');
                api.setFrameAttr({
                    name: 'moment_detail_frm',
                    bounces: false
                });
                $this.zaning = false;
                $this.replaying = true;
                $this.replyUserId = replyUserId || 0;
                $this.replyUserName = replyUserName || '';
                setTimeout(function () {
                    var replayTextClone = $api.byId('replayTextClone');
                    if (replayTextClone) {
                        var rows = Math.round((replayTextClone.scrollHeight - 6) / 24);
                        $this.replayTextClass = rows >= 3 ? 'three' : rows === 2 ? 'two' : '';
                    }
                    replayText.focus();
                }, 0)
            },
            commentSubmit: function () {
                var $this = this;
                if ($this.replayText.length === 0) return;
                var userInfo = $api.getStorage(_.USERINFO);
                post('/client/studyMoment/addMsg', {
                    studyMomentId: $this.studyMomentId,
                    msgContent: $this.replayText,
                    replyUserId: $this.replyUserId === 0 ? null : $this.replyUserId
                }, function (ret) {
                    if (ret.isSuccess) {
                        document.body.classList.remove('full_body');
                        $this.replaying = false;
                        api.setFrameAttr({
                            name: 'moment_detail_frm',
                            bounces: false
                        });
                        $this.getMsgList($this.replayStudyMoment.studyMomentId, $this.replayStudyMoment.msgList);
                        $this.replayText = '';
                        $this.replyUserId = 0;
                        $this.replyUserName = '';
                        api.sendEvent({
                            name: 'refresh_moments_event'
                        });
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        })
                    }
                });
            },
            delMoment: function () {
                var $this = this;
                api.confirm({
                    title: '提示',
                    msg: '确认删除该条互动吗？',
                    buttons: ['确定', '取消']
                }, function (ret, err) {
                    if (ret.buttonIndex === 1) {
                        post('/client/studyMoment/del', {
                            studyMomentId: $this.studyMomentId
                        }, function (ret) {
                            msgUtil.toast({
                                msg: ret.message
                            })
                            if (ret.isSuccess) {
                                api.sendEvent({
                                    name: 'del_moment_from_my_event',
                                    extra: {
                                        studyMomentId: $this.studyMomentId
                                    }
                                });
                                setTimeout(function () {
                                    closeWin()
                                }, 500)
                            }
                        });
                    }
                });
            },
            showDeleteButton: function (studyMomentMsgId, userId, curStudyMoment) {
                var $this = this;
                $this.curMsgId = studyMomentMsgId;
                var userInfo = $api.getStorage(_.USERINFO);
                if (userInfo.usrId !== userId) return;
                clearInterval(this.Loop);
                this.Loop = setTimeout(function () {

                    api.confirm({
                        title: '提示',
                        msg: '确认删除该条评论吗？',
                        buttons: ['确定', '取消']
                    }, function (ret, err) {
                        if (ret.buttonIndex === 1) {

                            post('/client/studyMoment/delMsg', {
                                studyMomentMsgId: studyMomentMsgId
                            }, function (ret) {
                                msgUtil.toast({
                                    msg: ret.message
                                })
                                if (ret.isSuccess) {
                                    $this.pageNum = 1;
                                    $this.getMsgList(curStudyMoment.studyMomentId, curStudyMoment.msgList);
                                }
                            });
                        }
                        $this.curMsgId = '';
                    });
                }, 1000);
            },
            clearLoop() {
                var $this = this;
                $this.curMsgId = '';
                clearInterval(this.Loop);
            },
        }
    });
</script>
</body>

</html>
